<template>
  <el-drawer
    :title="title"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="67%"
    :before-close="handleCancel"
    custom-class="drawer-container"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- 基本信息 -->
        <el-divider content-position="left">基本信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运单编号" prop="shipmentCode">
              <el-input v-model="form.shipmentCode" placeholder="请输入运单编号" maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运单状态" prop="shipmentStatus">
              <el-select v-model="form.shipmentStatus" placeholder="请选择运单状态" style="width: 100%">
                <el-option label="待发货" value="1" />
                <el-option label="运输中" value="2" />
                <el-option label="已签收" value="3" />
                <el-option label="已取消" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 发货信息 -->
        <el-divider content-position="left">发货信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货方" prop="senderId">
              <el-select v-model="form.senderId" placeholder="请选择发货方" style="width: 100%" @change="handleSenderChange">
                <el-option
                  v-for="sender in senderList"
                  :key="sender.senderId"
                  :label="sender.senderName"
                  :value="sender.senderId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货联系人" prop="senderContactName">
              <el-input v-model="form.senderContactName" placeholder="请输入发货联系人" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发货联系电话" prop="senderContactPhone">
              <el-input v-model="form.senderContactPhone" placeholder="请输入发货联系电话" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货地址" prop="senderAddress">
              <el-input v-model="form.senderAddress" placeholder="请输入发货地址" maxlength="200" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="发货地址选点">
              <el-button type="primary" size="small" @click="showSenderMapPicker = true">在地图上选择</el-button>
              <span v-if="form.senderLongitude && form.senderLatitude" class="ml10">
                已选择坐标: {{ form.senderLongitude }}, {{ form.senderLatitude }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 收货信息 -->
        <el-divider content-position="left">收货信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货方" prop="receiverId">
              <el-select v-model="form.receiverId" placeholder="请选择收货方" style="width: 100%" @change="handleReceiverChange">
                <el-option
                  v-for="receiver in receiverList"
                  :key="receiver.receiverId"
                  :label="receiver.receiverName"
                  :value="receiver.receiverId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货联系人" prop="receiverContactName">
              <el-input v-model="form.receiverContactName" placeholder="请输入收货联系人" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收货联系电话" prop="receiverContactPhone">
              <el-input v-model="form.receiverContactPhone" placeholder="请输入收货联系电话" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址" prop="receiverAddress">
              <el-input v-model="form.receiverAddress" placeholder="请输入收货地址" maxlength="200" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="收货地址选点">
              <el-button type="primary" size="small" @click="showReceiverMapPicker = true">在地图上选择</el-button>
              <span v-if="form.receiverLongitude && form.receiverLatitude" class="ml10">
                已选择坐标: {{ form.receiverLongitude }}, {{ form.receiverLatitude }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 运输信息 -->
        <el-divider content-position="left">运输信息</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货物名称" prop="goodsName">
              <el-input v-model="form.goodsName" placeholder="请输入货物名称" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物类型" prop="goodsType">
              <el-select v-model="form.goodsType" placeholder="请选择货物类型" style="width: 100%">
                <el-option label="普通货物" value="1" />
                <el-option label="易碎品" value="2" />
                <el-option label="液体" value="3" />
                <el-option label="危险品" value="4" />
                <el-option label="贵重物品" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货物重量(kg)" prop="goodsWeight">
              <el-input-number v-model="form.goodsWeight" :precision="2" :step="0.1" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货物体积(m³)" prop="goodsVolume">
              <el-input-number v-model="form.goodsVolume" :precision="3" :step="0.001" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="运输方式" prop="transportMode">
              <el-select v-model="form.transportMode" placeholder="请选择运输方式" style="width: 100%">
                <el-option label="公路运输" value="1" />
                <el-option label="铁路运输" value="2" />
                <el-option label="水路运输" value="3" />
                <el-option label="航空运输" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运费(元)" prop="freight">
              <el-input-number v-model="form.freight" :precision="2" :step="10" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="预计发货时间" prop="estimatedShipDate">
              <el-date-picker
                v-model="form.estimatedShipDate"
                type="date"
                placeholder="选择预计发货日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预计到达时间" prop="estimatedArrivalDate">
              <el-date-picker
                v-model="form.estimatedArrivalDate"
                type="date"
                placeholder="选择预计到达日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="支付方式" prop="paymentMethod">
              <el-select v-model="form.paymentMethod" placeholder="请选择支付方式" style="width: 100%">
                <el-option label="寄付" value="1" />
                <el-option label="到付" value="2" />
                <el-option label="月结" value="3" />
                <el-option label="第三方付" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 可追溯字段 -->
        <el-divider content-position="left">可追溯信息</el-divider>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入备注"
                maxlength="500"
                show-word-limit
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 发货地址地图选择器 -->
      <el-dialog title="选择发货地址" :visible.sync="showSenderMapPicker" width="80%" append-to-body>
        <div style="height: 500px;">
          <!-- 这里集成MapPicker组件 -->
          <MapPicker @confirm="handleSenderMapConfirm" />
        </div>
      </el-dialog>

      <!-- 收货地址地图选择器 -->
      <el-dialog title="选择收货地址" :visible.sync="showReceiverMapPicker" width="80%" append-to-body>
        <div style="height: 500px;">
          <!-- 这里集成MapPicker组件 -->
          <MapPicker @confirm="handleReceiverMapConfirm" />
        </div>
      </el-dialog>

      <div class="drawer-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import MapPicker from '@/components/MapPicker'

export default {
  name: 'ShipmentFormDrawer',
  components: {
    MapPicker
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      required: true
    },
    senderList: {
      type: Array,
      default: () => []
    },
    receiverList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      drawerVisible: false,
      showSenderMapPicker: false,
      showReceiverMapPicker: false
    }
  },
  watch: {
    visible(val) {
      this.drawerVisible = val
    },
    drawerVisible(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    /** 发货方选择变更 */
    handleSenderChange(senderId) {
      const sender = this.senderList.find(item => item.senderId === senderId)
      if (sender) {
        this.form.senderName = sender.senderName
        // 可以根据需要自动填充其他发货方信息
        if (!this.form.senderContactName && sender.contactName) {
          this.form.senderContactName = sender.contactName
        }
        if (!this.form.senderContactPhone && sender.contactPhone) {
          this.form.senderContactPhone = sender.contactPhone
        }
        if (!this.form.senderAddress && sender.address) {
          this.form.senderAddress = sender.address
        }
        if (!this.form.senderLongitude && sender.longitude) {
          this.form.senderLongitude = sender.longitude
        }
        if (!this.form.senderLatitude && sender.latitude) {
          this.form.senderLatitude = sender.latitude
        }
      }
    },
    /** 收货方选择变更 */
    handleReceiverChange(receiverId) {
      const receiver = this.receiverList.find(item => item.receiverId === receiverId)
      if (receiver) {
        this.form.receiverName = receiver.receiverName
        // 可以根据需要自动填充其他收货方信息
        if (!this.form.receiverContactName && receiver.contactName) {
          this.form.receiverContactName = receiver.contactName
        }
        if (!this.form.receiverContactPhone && receiver.contactPhone) {
          this.form.receiverContactPhone = receiver.contactPhone
        }
        if (!this.form.receiverAddress && receiver.address) {
          this.form.receiverAddress = receiver.address
        }
        if (!this.form.receiverLongitude && receiver.longitude) {
          this.form.receiverLongitude = receiver.longitude
        }
        if (!this.form.receiverLatitude && receiver.latitude) {
          this.form.receiverLatitude = receiver.latitude
        }
      }
    },
    /** 发货地址地图确认 */
    handleSenderMapConfirm(data) {
      this.form.senderLongitude = data.longitude
      this.form.senderLatitude = data.latitude
      if (data.address) {
        this.form.senderAddress = data.address
      }
      this.showSenderMapPicker = false
    },
    /** 收货地址地图确认 */
    handleReceiverMapConfirm(data) {
      this.form.receiverLongitude = data.longitude
      this.form.receiverLatitude = data.latitude
      if (data.address) {
        this.form.receiverAddress = data.address
      }
      this.showReceiverMapPicker = false
    },
    /** 提交表单 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit')
        }
      })
    },
    /** 取消按钮 */
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 20px;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
}
.ml10 {
  margin-left: 10px;
}
</style>